<template>
  <div style="height: 100vh;background: #fff;">
    <div class="login-title">{{ $t('login.t1') }}</div>
    <van-form @submit="onSubmit" class="login-card">
      <van-cell-group inset>
        <van-field
            v-model="userName"
            name="userName"
            :label="$t('login.t2')"
            :placeholder="$t('login.t2')"
            :rules="[{ required: true, message: $t('login.t3') }]"
        />
        <van-field
            v-model="userPasswd"
            type="password"
            name="userPasswd"
            :label="$t('login.t4')"
            :placeholder="$t('login.t4')"
            :rules="[{ required: true, message: $t('login.t5') }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block class="login-btn" native-type="submit">
          {{ $t('login.t6') }}
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Form, Field, CellGroup, Button, NavBar } from 'vant';
import {setToken} from "../../utils/auth";
import {login} from "../../api/admin";
import {setSessionItem} from "../../utils/storage";
import configJs from "../../config";

export default {
  components: {
    [NavBar.name]: NavBar,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [CellGroup.name]: CellGroup
  },

  data () {
    return {
      userName: '',
      userPasswd: '',
    }
  },

  methods: {
    onSubmit() {
      const params = {
        userName: this.userName,
        userPasswd: this.userPasswd,
        checkCode: '123456',
        _createTime: new Date().getTime(),
        type: '3'
      }
      login(this, params).then(response => {
        if (response.data.code === configJs.errCode.errOk || response.data.code.startsWith('0')) {
          setToken(response.data.body['sessionId'])
          setSessionItem('comId', response.data.body['comId'])
          this.$router.push({path: '/'})
        }
      }).catch(function (error) {
        console.log(error)
        return error
      })
    }
  }
};

</script>

<style lang="less">
.login {
  &-btn {
    color: #fff;
    background-color: #4293F4;
    border: 1px solid #4293F4;
  }

  &-title {
    text-align: center;
    padding-bottom: 30px;
    font-weight: bold;
    font-size: 20px;
    padding-top: 200px;
  }

  &-card {
    background: #fff;
    padding: 12px;
    //margin: 0 15px;
    border-radius: 5%;
    //margin-top: 200px;
    -webkit-box-shadow: 0 0 25px #cac6c6;
    box-shadow: 0 0 25px #cac6c6;
  }
}
</style>
